<template>
	<view class="me-main">
		<view class="lr-box">
			<view class="head-img" @tap="goPlayerManager()">
				<image :src="avatarImg"></image>
			</view>
			<view class="lr-btn" v-if="!isLR">
				<view class="login-btn" @tap="showModal('loginModal')">登录</view>
				<view class="register-btn" @tap="showModal('regModal')">注册</view>
			</view>
			<view class="success-login" v-else>
				<view class="player-show" @tap="goPlayerManager()">{{cookiePlayerName}}</view>
			</view>
		</view>
		<view class="padding text-center">
			<view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
				<view>玩家个人中心</view>
			</view>
		</view>
		<!-- 单行内容显示 -->
		<uni-list>
		    <uni-list-item :clickable="true" @click="goMyGlobalMarket()" title="全球市场" ></uni-list-item>
			<uni-list-item :clickable="true" @click="goMyAssetsInfo()" title="个人经济查询" ></uni-list-item>
			<uni-list-item :clickable="true" @click="goMyEconomy()" title="金币消费记录" ></uni-list-item>
			<uni-list-item :clickable="true" @click="goMyMcrmb()" title="节操币氪金记录" ></uni-list-item>
		</uni-list>
		<view class="cu-modal" :class="modalName=='loginModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">登录</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="cu-form-group">
						<view class="title">玩家名</view>
						<input v-model="playerName" placeholder="玩家名即游戏ID" name="input"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">密码</view>
						<input v-model="password" placeholder="请输入密码" name="input" password></input>
					</view>
					<view class="cu-form-group">
						<image class="code-show" :src="loginCodeHref" @tap="resetLoginCode()"></image>
						<input v-model="loginCode" placeholder="登录验证码" name="input"></input>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub  solid-left" @tap="goLogin">确定</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='regModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">注册</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="cu-form-group">
						<view class="title">玩家名</view>
						<input v-model="playerName" placeholder="玩家名即游戏ID" name="input"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">密码</view>
						<input v-model="password" placeholder="请输入密码" name="input" password></input>
					</view>
					<view class="cu-form-group">
						<view class="title">密码</view>
						<input v-model="confirmPassword" placeholder="请再次输入密码" name="input" password></input>
					</view>
					<view class="cu-form-group">
						<image class="code-show" :src="regCodeHref" @tap="resetRegCode()"></image>
						<input v-model="regCode" placeholder="注册验证码" name="input"></input>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">确定</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					{{tip}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {uniList} from '@dcloudio/uni-ui'
	import {uniListItem} from '@dcloudio/uni-ui'
	import ajax from '../../Ajax/index.js'
	import common from '../../common/index.js'
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				modalName: '',
				server: '',
				loginCodeHref: '',
				regCodeHref: '',
				playerName: '',
				password: '',
				confirmPassword: '',
				loginCode: '',
				regCode: '',
				tip: '',
				isLR: false,
				cookiePlayerName: '',
				avatarImg: '../../static/head.png'
			}
		},
		mounted() {
			this.server = ajax.base_url
			this.loginCodeHref = this.server + '/getNewLogVerifyCode'
			this.regCodeHref = this.server + '/getNewRegVerifyCode'
			if (common.getCookie('playerId')) {
				this.modalName = ''
				this.isLR = true
				this.cookiePlayerName = common.getCookie('playerName')
				this.getAvatar()
			} else {
				this.modalName = 'loginModal'
			}
		},
		methods: {
			showModal(modalName) {
				this.modalName = modalName
			},
			hideModal(e) {
				this.modalName = null
			},
			resetLoginCode() {
				this.loginCodeHref = this.server + 'getNewLogVerifyCode?' + Math.random()
			},
			resetRegCode() {
				this.regCodeHref = this.server + 'getNewRegVerifyCode?' + Math.random()
			},
			showTip(msg) {
				this.showModal('Modal')
				this.tip = msg
			},
			getAvatar() {
				let param = new URLSearchParams()
				param.append("playerName", this.cookiePlayerName)
				ajax.post('/avatar/getAvatar', param).then(res => {
					console.log(res);
					if (res.data.code === 200) {
						this.avatarImg = res.data.res.avatar
					}
				})
			},
			goLogin() {
				if (this.playerName === '') {
					this.showTip('请填写用户名或电话号码')
					return
				}
				if (this.password === '') {
					this.showTip('请填写密码')
					return
				}
				if (this.loginCode === '') {
					this.showTip('请输入正确的登录验证码')
					return
				}
				let param = new URLSearchParams()
				param.append("playerName", this.playerName)
				param.append("password", this.password)
				param.append("loginCode", this.loginCode)
				ajax.post('/account/login', param).then(res => {
					console.log(res)
					if (res.data.code === 200) {
						// 缓存数据
						localStorage.setItem('username', this.username)
						this.hideModal() // 关闭 LRPanel
						this.username = ''
						this.password = ''
						this.showTip(res.data.msg)
						this.isLR = true
						this.cookiePlayerName = common.getCookie('playerName')
						this.getAvatar()
					} else {
						this.showTip(res.data.msg)
					}
				})
			},
			goReg() {
				if (this.playerName === '') {
					this.showTip('请填写用户名')
					return
				}
				if (this.password.length < 6) {
					this.showTip('密码必须大于等于6位')
					return
				}
				if (this.password !== this.confirmPassword) {
					this.showTip('两次密码不一致')
					return
				}
				let param = new URLSearchParams()
				param.append("playerName", this.playerName)
				param.append("password", this.password)
				param.append("regCode", this.regCode)
				ajax.post('/account/regNewAccount', param).then(res => {
					if (res.data.code === 200) {
						this.$Message.success('注册成功')
						this.username = ''
						this.password = ''
						this.confirmPassword = ''
						this.hideModal()
						this.showModal('loginModal') // 注册成功打开登录面板
					} else {
						this.showTip(res.data.msg)
					}
				})
			},
			goPlayerManager() {
				if(this.isLR) {
					uni.navigateTo({
						url: 'PlayerManager/Manager'
					})
				} else {
					this.showTip('请先登录')
				}
			},
			goMyGlobalMarket() {
				if(this.isLR) {
					uni.navigateTo({
						url: 'PlayerManager/MyGlobalMarket'
					})
				} else {
					this.showTip('请先登录')
				}
			},
			goMyAssetsInfo() {
				if(this.isLR) {
					uni.navigateTo({
						url: 'PlayerManager/AssetsInfo'
					})
				} else {
					this.showTip('请先登录')
				}
			},
			goMyEconomy() {
				if(this.isLR) {
					uni.navigateTo({
						url: 'PlayerManager/EconomyInfo'
					})
				} else {
					this.showTip('请先登录')
				}
			},
			goMyMcrmb() {
				if(this.isLR) {
					uni.navigateTo({
						url: 'PlayerManager/McrmbInfo'
					})
				} else {
					this.showTip('请先登录')
				}
			}
		}
	}
</script>

<style lang="scss">
	.me-main {
		.code-show {
			width: 200rpx;
			height: 100rpx;
		}
		.lr-box {
			width: 100%;
			height: 300rpx;
			background: #179EDC 100% 100%;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.head-img {
				width: 150rpx;
				height: 150rpx;
				background-color: white;
				border-radius: 50%;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.lr-btn {
				display: flex;
				justify-content: space-around;
				align-items: center;
				color: #fff;
				.login-btn {
					width: 130rpx;
					height: 75rpx;
					line-height: 75rpx;
					text-align: center;
					border-radius: 20rpx;
					background-color: skyblue;
					margin: 0 40rpx;
				}
				.register-btn {
					width: 130rpx;
					height: 75rpx;
					line-height: 75rpx;
					border-radius: 20rpx;
					text-align: center;
					background-color: skyblue;
				}
			}
			.success-login {
				margin-left: 20rpx;
				.player-show {
					color: #E5FCF5;
					font-weight: 700;
					font-size: 56rpx;
				}
			}
		}
	}
</style>
